<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem布局案例</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        html{
            font-size: 16px;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        header{
            height: 2.75rem;
            display: flex;
            background: #0cc440;
            justify-content: center;
            align-items: center;
        }
        header div{
            /* display: flex; */
            width: 3.75rem;
            height: 1.5rem;
            line-height: 1.5rem;
            font-size: .75rem;
            text-align: center;
        }
        header div:first-child{
            color: white;
            background: #63d985;
            border-radius: .625rem 0 0 .625rem;
        }
        header div:last-child{
            color: #99ebba;
            background: #3dd065;
            border-radius: 0 .625rem .625rem 0;
        }
        section{
            flex: 1;
            overflow: auto;
        }
        ul{
            list-style: none;   
        }
        section ul{
            display: flex;
            position: sticky;
            top: 0;
        }
        section ul>li{
            color: #656565;
            font-size: .75rem;
            flex: 1;
            /* width: 33.33%; */
            height: 2.1875rem;
            line-height: 2.1875rem;
            text-align: center;  
            border-bottom: .0313rem solid #e1e8e1;
            background:white;
        }
        ul li:hover{
            border-bottom:.1563rem solid #0cc440;
            color: #0cc440;
        }
        
        section .div1{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .div1>div{
            width: calc(50% - .1563rem);
            box-sizing: border-box;
            /* height: 11.6875rem; */
            border: .0313rem solid  #e1e8e1;
            margin-top: .25rem; 
        }
        .div1 div>p{
            height: 1.75rem;
            width: 100%;
            line-height: 1.75rem;        
            text-indent: .625rem;
            font-size: .75rem;
            white-space: nowrap;
            overflow: hidden; 
            text-overflow:ellipsis;
        }
        .div1 div>img{
            width: 100%;
            /* height: calc(100% - 1.75rem); */
        }
        
        
        
        footer{
            height: 2.75rem;
            background:white;
            display: flex;
            position: relative;
        }
        footer div{
            display: flex;
            flex-direction: column;
            width: 20%;
            color: #d6d6d6;
            align-items: center;
            justify-content: center;
        }
        footer div i{
            height: 1.3125rem;
            line-height: 1.3125rem;
            font-size: .9375rem;
        }
        footer div span{
            line-height: 1.0625rem;
            height: 1.0625rem;
            font-size: .75rem;
        }
        footer div:nth-child(3) i{
            width: 3.125rem;
            height: 3.125rem;
            font-size: 1.875rem;
            border-radius: 50%;
            position: absolute;
            border: .0625rem solid #d6d6d6; 
            top: -0.5rem;
            left: 50%;
            text-align: center;
            line-height: 3.125rem;
            margin-left: -1.5625rem;
            background: white;
        }
        footer div:hover{
            color: #0cc440;
        }
    </style>
    <script>
        //fontsize 计算   
        document.documentElement.style.fontSize=document.documentElement.clientWidth/390 * 16 +'px'
        // 动态页面的font-size：新加载的设备宽度与原来设备宽度相比较大（小）了多少倍（新设备宽度÷原设备宽度）*基准font-size
        // font-size=新加载的设备宽度÷盒子宽度（360÷46.875=.48rem）
        // fontsize = 当前设备的css布局宽度/物理分辨率(设计稿的宽度)* 基准font-size
    </script>

</head>
<body>
    <header>
        <div>热点</div>
        <div>关注</div>  
    </header>
    
    <section>
        <ul>
            <li>足球现场</li>
            <li>足球美女 </li>
            <li>足球生活</li>
        </ul>
       <div class="div1">
            <div>
                <img src="./image/樱桃小丸子.png">
                <p>小丸子啊小丸子！</p>
            </div>
            <div>
                <img src="./image/樱桃小丸子.png">
                <p>萌萌哒小丸子啊小丸子！萌萌哒小丸子啊小丸子！</p>
            </div>
            <div>      
                <img src="./image/樱桃小丸子.png">
                <p>小丸子啊小丸子！</p>
            </div>
            <div>
                <img src="./image/樱桃小丸子.png">
                <p>萌萌哒小丸子啊小丸子！萌萌哒小丸子啊小丸子！</p>
            </div>
            <div>
                <img src="./image/樱桃小丸子.png">
                <p>小丸子啊小丸子！</p>
            </div>
            <div>
                <img src="./image/樱桃小丸子.png">
                <p>萌萌哒小丸子啊小丸子！萌萌哒小丸子啊小丸子！</p>
            </div>
            <div>
                <img src="./image/樱桃小丸子.png">
                <p>萌萌哒小丸子啊小丸子！萌萌哒小丸子啊小丸子！
                    萌萌哒小丸子啊小丸子！萌萌哒小丸子啊小丸子！
                </p>
            </div>
       </div>
        
    </section>
    <footer>
        <div><i class="iconfont icon-03"></i>
        <span>首页</span></div>
        <div><i class="iconfont icon-fangdajing"></i>
        <span>发现</span></div>
        <div><i class="iconfont icon-tian"></i>
        </div>
        <div><i class="iconfont icon-user"></i>
        <span>我的</span></div>
        <div><i class="iconfont icon-tuichu"></i>
        <span>退出</span></div>
    </footer>
</body>
</html>